<template>
    <FormProvider :form="form">
        <ArrayField name="array">
            <template #default="{ field }">
                <div
                    v-for="(item, index) in field.value || []"
                    :key="item.id"
                    :style="{ marginBottom: '10px' }"
                >
                    <Space>
                        <Field :name="`${index}.value`" :component="[Input]" />
                        <Button @click="() => field.remove(index)">
                            Remove
                        </Button>
                        <Button @click="() => field.moveUp(index)">
                            Move Up
                        </Button>
                        <Button @click="() => field.moveDown(index)">
                            Move Down
                        </Button>
                    </Space>
                </div>
                <Button @click="() => field.push({ id: Date.now(), value: '' })">
                    Add
                </Button>
            </template>
        </ArrayField>
        <!-- 新增提交按钮 -->
        <Button @click="submitForm">Submit</Button>
    </FormProvider>
</template>

<script setup>
import { Input, Space, Button } from 'ant-design-vue';
import { createForm } from '@formily/core';
import { FormProvider, ArrayField, Field } from '@formily/vue';
import 'ant-design-vue/dist/antd.css';

// 创建表单实例
const form = createForm();

// 定义提交表单的方法
const submitForm = () => {
    // 获取表单所有字段的值
    const formValues = form.values;
    console.log('表单提交的值:', formValues);
};
</script>